import GraphBack from '../../src'
function draw() {
  document.querySelectorAll('.graph-background').forEach((ele) => drawBackground(ele))
}
window.addEventListener('resize', () => draw())

function drawBackground(ele) {
  const board = new GraphBack.Board(ele, { create: true })
  const line = new GraphBack.Polyline({
    points: GraphBack.Convert(board, [
      [10, 10],
      [-10, 10],
      [-10, -10],
      [10, -10]
    ]),
    lineWidth: 2,
    close: true
  })
  const box = line.getBoundBox()
  const lineGradient = new GraphBack.LineGradient(box.right, box.top, box.left, box.bottom)
  lineGradient.add(0, '#235fa7')
  lineGradient.add(0.5, 'rgba(61, 92, 155, 0.3)')
  lineGradient.add(1, '#235fa7')
  line.option.color = lineGradient
  board.add(line)
  const rect = new GraphBack.Rect({ x: 11, y: 11, width: board.width - 22, height: 40 })
  const lineGradient2 = new GraphBack.LineGradient(box.left, 0, box.right, 0)
  lineGradient2.add(0, '#235fa7')
  lineGradient2.add(0.8, 'rgba(61, 92, 155, 0)')
  rect.option.color = lineGradient2
  board.add(rect)
  board.render()
}
